<template>
  <div
    class="bre-div-h100"
    @mousedown="mouseHandle($event,0)"
    @mouseup="mouseHandle($event,1)"
    @mousemove="mouseMoveHandle"
  >
    <!-- style="overflow-y: hidden;" -->
    <div class="notion-overlay-container" :style="{display:box.display}"></div>
    <div
      :style="{height:box.height+'px',width:box.width+'px',
       top:box.top+'px',left:box.left+'px',display:box.display}"
      class="box"
    ></div>
    <slot></slot>
  </div>
</template>
<script>
//禁用 
// const rect1 = { x: 100, y: 100, width: 100, height: 100 }
// const rect2 = { x: 150, y: 150, width: 100, height: 100 }
// isOverlap(rect1, rect2) // => true
// const isOverlap = (rect1, rect2) => {
//   const startX1 = rect1.x,
//     startY1 = rect1.y,
//     endX1 = startX1 + rect1.width,
//     endY1 = startY1 + rect1.height;
//   const startX2 = rect2.x,
//     startY2 = rect2.y,
//     endX2 = startX2 + rect2.width,
//     endY2 = startY2 + rect2.height;
//   return !(
//     endY2 < startY1 ||
//     endY1 < startY2 ||
//     startX1 > endX2 ||
//     startX2 > endX1
//   );
// };
export default {
  name: "OverlayContainer",
  props: {
    rect: { type: Object, required: true }
  },
  data() {
    return {
      box: {
        height: 0,
        width: 0,
        top: 0,
        left: 0,
        display: "none",
        pageX: 0, //开始-固定记录
        pageY: 0
      }
      // rect:{x:0, y: 0, width: 0, height: 0},
    };
  },
  methods: {
    onselectstart(bool) {
      document.onselectstart = () => bool;
    },
    
    mouseHandle(e,statu) {
      if (statu == 0) {
        // 按下 
        //  this.onselectstart(false)
        this.box.width = 0;
        this.box.height = 0;
        this.box.display = "block";
        this.box.pageX = e.pageX; //固定记录
        this.box.pageY = e.pageY; //固定记录
        this.box.top = e.pageY; //开始坐标Y
        this.box.left = e.pageX; //开始坐标X
        //记录经过的
      } else {
        //  this.onselectstart(true)
        // let rect1 = {
        //   x: this.box.left,
        //   y: this.box.top,
        //   width: this.box.width,
        //   height: this.box.height
        // };
        // let rect2 = this.rect;
        // console.log(isOverlap(rect1, rect2));
        this.box.display = "none"; //放开-消失
      }
    },
    mouseMoveHandle(e) {
      if (this.box.display == "none") { return; } //结束
      // window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
      if (e.pageX < this.box.pageX) {//判断左
        this.box.left = e.pageX; 
        if (e.pageY  < this.box.pageY) {//左上移动 
          this.box.top = e.pageY; 
        } 
      } 
      else if (e.pageY < this.box.pageY) { //判断上
         this.box.top =e.pageY; 
         }
        this.box.height = Math.abs(e.pageY - this.box.pageY);//下边
        this.box.width = Math.abs(e.pageX - this.box.pageX);//右边
    }
  }
};
// clientX 可见像素位置
</script>
<style   >
.notion-overlay-container {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  display: flex;
  flex: 1 1 0%;
  cursor: default;
}

.box {
  pointer-events: none;
  display: none;
  position: absolute;
  z-index: 9999;
  background: rgba(46, 170, 220, 0.2);
}
</style>
